<template>
    <div class="nav">
        <ul>
            <li
                v-for="item in navList"
                :key="item.name"
                :class="{ 'nav-active': $route.name === item.name }"
            >
                <router-link :to="item.path">
                    <i :class="`icon icon-${item.icon}`"></i>
                    {{ item.title }}
                </router-link>
            </li>
        </ul>
    </div>
</template>
<script lang="ts" setup>
type Nav = {
    path: string
    name: string
    title: string
    icon: string
}

const navList: Nav[] = [
    {
        path: '/',
        name: 'Index',
        title: '首页',
        icon: 'home',
    },
    {
        path: '/hot',
        name: 'Hot',
        title: '热榜',
        icon: '',
    },
    {
        path: '/subject',
        title: '话题',
        name: 'Subject',
        icon: 'hash',
    },
]
</script>
<style lang="less" scoped>
.nav {
    ul {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 100%;
        li {
            margin-right: 10px;
            height: 100%;
            > a {
                display: block;
                height: 100%;
                line-height: 22px;
                padding: 15px;
                box-sizing: border-box;
                color: var(--color-text-p);
            }
            &:hover {
                background-color: var(--color-white-s);
            }
        }
        .nav-active {
            > a {
                color: var(--color-primary);
            }
            &:hover {
                background-color: var(--color-white);
            }
        }
    }
}
</style>
